import "./mytext.css"
import { useNavigate } from "react-router-dom";
import React, { useState, useEffect } from 'react';
import { Button, Form, Input, Space, Table, message } from 'antd';
import axios from '../../utils/myAixos'
// import add from "../../componet/addVenue/add"
const Vs = () => {
    //表格

    const [form] = Form.useForm();
    //获取数据    
    const [data, setDataList] = useState([])

    //获取页面数据
    useEffect(() => {
        axios({
            url: '/venueData',
            method: 'post'
        }).then(res => {

            if (res.status === 200) {
                // console.log(11111111111, res.data.data)
                for (let i = 0; i < res.data.data.length; i++) {
                    if (res.data.data[i].v_status === "true") {
                        res.data.data[i].v_status = "正常"
                    } else if (res.data.data[i].v_status === "0") {
                        res.data.data[i].v_status = "弃用"
                    } else if (res.data.data[i].v_status === "1") {
                        res.data.data[i].v_status = "正常"
                    } else if (res.data.data[i].v_status === 'false') {
                        res.data.data[i].v_status = "弃用"
                    }
                }
                setDataList(res.data.data)
                // console.log(setDataList)
            }
        })
    }, [])
   
    //查询
    const search = (params) => {
        console.log('values', params);
        if(params.v_name === ''){
            // console.log(11111111111)
            axios({
                url: '/venueData', 
                method: 'post'
            }).then(res => {
    
                if (res.status === 200) {
                    // console.log(11111111111, res.data.data)
                    for (let i = 0; i < res.data.data.length; i++) {
                        if (res.data.data[i].v_status === "true") {
                            res.data.data[i].v_status = "正常"
                        } else if (res.data.data[i].v_status === "0") {
                            res.data.data[i].v_status = "弃用"
                        } else if (res.data.data[i].v_status === "1") {
                            res.data.data[i].v_status = "正常"
                        } else if (res.data.data[i].v_status === 'false') {
                            res.data.data[i].v_status = "弃用"
                        }
                    }
                    setDataList(res.data.data)
                    // console.log(setDataList)
                }
            })
        }else{
            axios({
                url: 'venueSearch',
                method: 'post',
                data:params
            }).then(res => {
                console.log(11111, res)
                if (res.status === 200) {
                    setDataList(res.data.data)
                } else {
                    message.error("查询失败")
                }
            }).catch(err => {
                console.log('查询结果', err)
            })
        } 
    };

    //点击添加
    const navigate = useNavigate()
    const add = () => {
        navigate("/HomePage/add")
    };

    //删除
    const del = (row) => {
        console.log(row)
        axios({
            url: 'venueDel',
            method: 'post',
            data: {
                v_id: row.v_id
            }
        }).then(res => {
            console.log(res)
            if (res.status === 200) {
                message.success("删除成功")
                axios({
                    url: '/venueData',
                    method: 'post'
                }).then(res => {

                    if (res.status === 200) {
                        // console.log(11111111111, res.data.data)
                        for (let i = 0; i < res.data.data.length; i++) {
                            if (res.data.data[i].v_status === "true") {
                                res.data.data[i].v_status = "正常"
                            } else if (res.data.data[i].v_status === "0") {
                                res.data.data[i].v_status = "弃用"
                            } else if (res.data.data[i].v_status === "1") {
                                res.data.data[i].v_status = "正常"
                            } else if (res.data.data[i].v_status === 'false') {
                                res.data.data[i].v_status = "弃用"
                            }
                        }
                        setDataList(res.data.data)
                        // console.log(setDataList)
                    }
                })

            } else {
                message.error('删除失败')
            }
        }).catch(err => {
            console.log('删除数据', err)
        })

    }

    //编辑
    const edit = (row) => {
        navigate("/HomePage/edit", { state: row })
        // console.log(row)
    }


    //表格列
    const columns = [
        // {
        //     title: 'id',//表格列名
        //     dataIndex: 'v_id',//该列对应数据字段
        //     key: 'v_id'//该列唯一值
        // },
        {
            title: '场馆名称',
            dataIndex: 'v_name',
            key: 'v_name'
        },
        {
            title: '电话',
            dataIndex: 'v_phone',
            key: 'v_phone',
        },
        {
            title: '地址',
            dataIndex: 'v_address',
            key: 'v_address',
        },
        {
            title: '邮箱',
            key: 'v_email',
            dataIndex: 'v_email',

        },
        {
            title: '状态',
            key: 'v_status',
            dataIndex: 'v_status',

        },
        {
            title: '操作',
            render: (_, record) => (
                <Space className="btn" size="middle" style={{ color: "#00ccff", width: "76px", display: "flex", }}>
                    <span onClick={() => edit(record)}>编辑</span>
                    <span onClick={() => del(record)}>删除</span>
                </Space>
            ),
        },
    ]
    //数据

    // const data = [
    //     {
    //         key: '1',
    //         name: "苍山馆",
    //         phone: '13333333333',
    //         address: '商场二楼',
    //         email: '123333@123.com',
    //         status: '正常'
    //     },
    //     {
    //         key: '2',
    //         name: "苍山馆",
    //         phone: '13333333333',
    //         address: '商场二楼',
    //         email: '123333@123.com',
    //         status: '正常'
    //     },
    //     {
    //         key: '3',
    //         name: "苍山馆",
    //         phone: '13333333333',
    //         address: '商场二楼',
    //         email: '123333@123.com',
    //         status: '正常'
    //     },
    //     {
    //         key: '4',
    //         name: "苍山馆",
    //         phone: '13333333333',
    //         address: '商场二楼',
    //         email: '123333@123.com',
    //         status: '正常'
    //     },
    //     {
    //         key: '5',
    //         name: "苍山馆",
    //         phone: '13333333333',
    //         address: '商场二楼',
    //         email: '123333@123.com',
    //         status: '正常'
    //     }
    // ];

    return (
        <div className="body">
            <header className={"header11"}>
                <Form form={form} name="horizontal_login" layout="inline" onFinish={search}>
                    <Form.Item
                        name="v_name"
                    >
                        <Input placeholder="搜索关键词" title="输入场所名进行查询" />
                    </Form.Item>
                    <Form.Item shouldUpdate>
                        {() => (
                            <Button
                                type="primary"
                                htmlType="submit"
                            >
                                查询
                            </Button>
                        )}
                    </Form.Item>
                    
                    <Form.Item>
                        {/*#e6f4ff*/}
                        <Button type={"primary"}
                            style={{ backgroundColor: "#1677ff", color: "white", border: "1px solid #ccc", height: '33px' }}
                            onClick={add}>添加场馆</Button>

                    </Form.Item>
                </Form>
            </header>
            <Table columns={columns} dataSource={data} />
            {/*新增弹框*/}

        </div>
    );
}
export default Vs  
